const path = require("path");
console.log(path.join(__dirname, "/build"), "输出路径");
// 第一步：引入插件
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const VueLoaderPlugin = require("vue-loader/lib/plugin");
module.exports = {
  mode: "development", // production(生产) development 开发
  // entry: {
  //     home: "./src/js/index.js"
  // },

  entry: "./src/js/main.js",
  // output:{
  //     "path": path.join(__dirname,'/build'), // 决定出口文件在哪里
  //     "filename": "[name].js" // 设置出口文件的名字。默认情况下，它叫main.js
  // },
  output: {
    path: path.resolve(__dirname, "build"),
    //publicPath :'www.baidu.com/build/', // 通常是我们开发之后上线的一个路径 服务器 www.baidu.com
    filename: "main.js"
  },
  module: {
    rules: [
      // rules 是数组
      {
        test: /\.css$/, // 检查css文件
        use: [MiniCssExtractPlugin.loader, "css-loader", "postcss-loader"] // use 使用
      },
      {
        test: /\.less$/,
        use: [
          MiniCssExtractPlugin.loader,
          "css-loader",
          "postcss-loader",
          "less-loader"
        ]
      },
      {
        test: /\.(png|svg|jpg)$/,
        use: [
          {
            loader: "url-loader",
            options: {
              limit: 5 * 1024
            }
          }
        ]
      },
      {
        test: /\.js$/,
        use: [
          {
            loader: "babel-loader",
            options: {
              exclude: /node_modules/
            }
          }
        ]
      },
      {
        test: /\.vue$/,
        loader: "vue-loader"
      }
    ]
  },
  // 实例化插件
  plugins: [
    new MiniCssExtractPlugin(),
    new HtmlWebpackPlugin({
      // 打包输出HTML
      minify: {
        // 压缩HTML文件
        removeComments: true, // 移除HTML中的注释
        collapseWhitespace: true, // 删除空白符与换行符
        minifyCSS: true // 压缩内联css
      },
      filename: "index.html",
      template: path.resolve("./index.html") // 指定模块的位置
    }),
    new CleanWebpackPlugin(),
    new VueLoaderPlugin()
  ],
  devServer: {
    contentBase: "./dist",
    host: "127.0.0.1", // 配置启动ip地址
    port: 8081, // 配置端口
    open: true // 配置是否自动打开浏览器
  }
};
